/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var bagWidth = width /3;
console.log(width);
var BagView  = require('./BagView')
var JsonData = require('./test.json');
var LoginView = require('./LoginView')
var MyScrollView = require('./MyScrollView');
var BannerView = require('./BannerView');
export default class first extends Component {
  render(){
    return <BannerView ></BannerView>
  }

  /*render() {
    return (
      <View style={styles.container}>

        <Text style={[styles.textStyle, {width:50,height:80, backgroundColor:'#aa00ee'}]}>
          aaaaaa
        </Text>
        <Text style={styles.textStyle}>
        bbbbbb
      </Text>

        <Text style={[styles.textStyle, {alignSelf:'flex-end'}]}>
          cccccc
        </Text>
        <Text style={styles.textStyle}>
          dddddd
        </Text>
        <Text style={styles.textStyle}>
            eeeeeeee
        </Text>

      </View>
    );
  }*/

// render(){
//     return (<View>
//       <Image source={require('./images/03.jpg')}></Image>
//       <Image source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490954782701&di=227c9b25b1ac663bac16ec12e32bd82d&imgtype=0&src=http%3A%2F%2Fs8.sinaimg.cn%2Fmw690%2F006jqLffgy6YFo85VdRd7%26690'}}  style={{width:300, height:300}}></Image>
//     </View>)
//   }
  
  /*render(){
    return <View  style={styles.container}>
      <View style={styles.itemStyle}>
        <Image source={require('./images/danjianbao.png') } style={styles.imageStyle}></Image>
        <Text>单肩包</Text>
      </View>
      <View  style={styles.itemStyle}>
        <Image source={require('./images/danjianbao.png')} style={styles.imageStyle}></Image>
        <Text>单肩包</Text>
      </View>
    </View>
  }*/
 /* renderBags = () =>{
    return JsonData.data.map((item,i)=>{
        return  <View key={i} style={styles.itemStyle}>
          <Image source={require('./images/danjianbao.png') } style={styles.imageStyle}></Image>
          <Text>{item.title}</Text>
        </View>
    })
  }*/
  /*  render(){
  return <View  style={styles.container}>
      <BagView></BagView>

    </View>*/
  /*  return <View  style={styles.container}>
      {this.renderBags()}
        </View>
    }*/
   /* render(){
      return <LoginView></LoginView>
    }*/

/*  render(){
   return <MyScrollView></MyScrollView>
   }*/

}

const styles = StyleSheet.create({
  container: {
    flexDirection:'row',// row column-reverse
    // flex: 1,//权重
     justifyContent: 'flex-start',// 在主轴方向上的对其方式 flex-end flex-start  space-between
     alignItems: 'center',// 交叉轴对其方式
    backgroundColor: '#F5FCFF',
    flexWrap:'wrap',//default 不换行
    // height:400,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  textStyle:{
    backgroundColor:'#f00',
    width:100,
    height:50,
  },
  imageStyle:{
    width:100,
    height:100,
  },
  itemStyle:{
    flexDirection:'column',
    alignItems:'center',
    width:bagWidth,
  }
});

AppRegistry.registerComponent('first', () => first);
